<template>
    <div>
        <Form ref="formInline" :model="formInline"  inline>
            <FormItem prop="单位">
                <Input type="text" v-model="formInline.department_name" placeholder="单位">
                </Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="search()">搜索</Button>
            </FormItem>
        </Form>
        <Table border :columns="columns12" :data="tableData" width="100%">
            <template slot="word_plugg">
                <span>{{ qd }}</span>
            </template>
            <template slot-scope="{ row }" slot="action">
                <Button type="primary" size="small" style="margin-right: 5px" @click="edit(row)">查看</Button>
            </template>
        </Table>
        <Row type="flex" justify="end" class="pg">
            <Row type="flex" justify="end" class="pg">
                <Page :total="params.totalRecord" show-sizer :page-size="params.pageSize"
                      show-total @on-change="pageAction" @on-page-size-change="pSizeChange"/>
            </Row>
        </Row>
    </div>
</template>

<script>
import { problemPluggingList } from '@/api/user'
export default {

  name: 'test',

  data () {
    return {
      columns12: [
        {
          title: '序号列',
          type: 'index',
          align: 'center'
          // width: 150
        },
        {
          title: '单位',
          key: 'department_name',
          align: 'center'
        },
        {
          title: '问题清单',
          key: 'word_plugg',
          align: 'center',
          slot: 'word_plugg'
        },
        {
          title: '最后更新时间',
          key: 'update_time',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          width: 100,
          align: 'center'
        }
      ],
      tableData: [],
      formInline: {
        department_name: ''
      },
      modal6: false,
      loading: true,
      formValidateEdite: {
        description_existing_problems: '',
        department_name: '',
        problem_description: '',
        business_involved: '',
        cause_analysis: '',
        solutions: '',
        text_plugg: ''
      },
      cid: '',
      params: { pageNo: 1, pageSize: 10, totalRecord: 0 },
      qd: ''
    }
  },

  props: {

  },

  components: {

  },

  computed: {

  },

  methods: {
    async init (data) {
      problemPluggingList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data.results
          this.params.totalRecord = ret.data.data.totalRecord
          if (this.tableData.word_plugg !== '') {
            this.tableData.word_plugg = '√'
            this.qd = ret.data.data.results.word_plugg
          }
        } else {
          this.$Notice.error({ title: ret.data.errmsg, desc: '' })
        }
        console.log(ret.data.data.results.word_plugg)
      })
    },
    edit (row) {
      let a = this.$store.state.user.severUserInfo.data.company_name.split('-')
      if (a[1] === '政府部门') {
        this.$router.push({
          name: 'otherAspects',
          params: {
            a: row
          }
        })
      } else {
        this.$router.push({
          name: 'problemVulnerabilityf',
          params: {
            a: row
          }
        })
      }
    },
    search () {
      const data = {
        department_name: this.formInline.department_name
      }
      this.init(data)
    },
    pageAction (current) {
      problemPluggingList({ pageNo: current }).then(ret => {
        this.tableData = ret.data.data.results
      })
    },
    pSizeChange (val) {
      problemPluggingList({ pageSize: val }).then(ret => {
        this.tableData = ret.data.data.results
      })
    }
  },

  watch: {

  },

  mounted () {
    this.init()
  }

}
</script>

<style scoped>
    .w{
        height: 150px;
    }
    .ivu-alert-info {
        border: 1px solid gainsboro;
        background-color: white;
    }
    .ivu-alert {
        position: relative;
        padding: 8px 48px 8px 16px;
        border-radius: 4px;
        color: #515a6e;
        font-size: 14px;
        line-height: 16px;
        margin-bottom: 10px;
        margin-top: 20px;
    }
    /*. .ivu-alert-info w {*/
    /*    height: 800px;*/
    /*}*/
    .mid{
        text-align: center;
    }
    .pg{
        margin-top: 20px;
    }
</style>
